<template>
  <div>
    <div class="handle-box" style="width:100%;height:60px;line-height:60px">
      <el-input
        v-model="searchInfo"
        placeholder="筛选关键词"
        class="handle-input mr10"
        style="width:40%;float:left"
        routers
      ></el-input>
      <el-button
        type="primary"
        icon="search"
        @click="getUsers"
        style="float:left;margin-top:10px"
      >搜索</el-button>
      <router-link to="/fabushangpi">
        <el-button type="primary" icon="search" style="float:right;margin-top:10px">添加</el-button>
      </router-link>
    </div>
    <div class="top9">
      <div class="haha" v-for="item in goodList">
        <h3>{{item.id}}</h3>
        <h1>{{item.name}}</h1>
        <img :src="'https://wldpvc.com'+item.img_url" alt srcset />

        <div id="btn">
          <button class="btn">详情</button>
          <button class="btn">删除</button>
        </div>
      </div>
      <div class="fenye">
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1,5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="goodList.length"
          style="float:left"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      searchInfo: "",
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页的数据条数
      goodList: []
    };
  },
  mounted() {
    this.axios({
      method: "post",
      url: "/wrd/dfl",
      params: {}
    }).then(res => {
      console.log(res);
      this.goodList = res.data.data;
      console.log(this.goodList);
    });
  },
  methods: {
    getUsers() {
      this.isShowloading = true;
      let params = {
        searchInfo: this.searchInfo.trim(),
        page: this.pageNo
      };
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    handleClick(row) {
      console.log(row);
    }
  }
};
</script>
<style >
.top9 {
  width: 100%;
  margin: auto;
  background-color: gold;
}
.haha {
  width: 320px;
  height: 350px;
  border: 3px solid gainsboro;
  margin: 30px auto;
  float: left;
  margin-left: 30px;
}
.haha img {
  margin: 20px;
  width: 250px;
  height: 250px;
}
.haha a {
  text-decoration: none;
  color: black;
}
.haha h1 {
  float: left;
  margin-left: 20px;
}
.haha h3 {
  float: left;
  margin-top: 4px;
  margin-left: 40%;
}
#btn {
  width: 100%;
  height: 20px;
  /* background-color: black; */
}
</style>